<script setup lang='ts'>
const {imgData,isI,imgDataText} = defineProps<{imgData:any,isI:number,imgDataText:any}>()
</script>

<template>
    <div class="top"></div>
    <div class="content1">
        <div class="imgData">
            <img class="thisImg" v-if="0===isI" src="../../assets/img/decoration.png" alt="">
            <img class="thisImg" v-if="1===isI" src="../../assets/img/decoration2.png" alt="">
            <img class="thisImg" v-if="2===isI" src="../../assets/img/decoration3.png" alt="">
            <img class="thisImg" v-if="3===isI" src="../../assets/img/decoration4.png" alt="">
            <img class="thisImg" v-if="4===isI" src="../../assets/img/decoration5.png" alt="">
            <img class="thisImg" v-if="5===isI" src="../../assets/img/decoration6.png" alt="">
            <div class="dataColor">
                <div class="textBig">
                    <span><h1>{{imgData.h1}}</h1>{{imgData.text}}</span>
                    <p>{{imgData.p}}</p>
                </div>
                <div class="hr"></div>
                <div class="textBig">
                    <span><h1>{{imgData.h2}}</h1>{{imgData.text2}}</span>
                    <p>{{imgData.p2}}</p>
                </div>
                <div class="hr"></div>
                <div class="textBig">
                    <span><h1>{{imgData.h3}}</h1>{{imgData.text3}}</span>
                    <p>{{imgData.p3}}</p>
                </div>
            </div>
        </div>
        <div class="data">
            <img v-if="0===isI" class="icon" src="../../assets/img/icon0.png" alt="">
            <img v-if="1===isI" class="icon" src="../../assets/img/icon1.png" alt="">
            <img v-if="2===isI" class="icon" src="../../assets/img/icon2.png" alt="">
            <img v-if="3===isI" class="icon" src="../../assets/img/icon3.png" alt="">
            <img v-if="4===isI" class="icon" src="../../assets/img/icon4.png" alt="">
            <img v-if="5===isI" class="icon" src="../../assets/img/icon5.png" alt="">
            <h1 class="dataH1">{{imgDataText.h1}}</h1>
            <h4>{{imgDataText.h4}}</h4>
            <p>{{imgDataText.p}}</p>
            <h4>{{imgDataText.h42}}</h4>
            <p>{{imgDataText.p2}}</p>
            <h4>{{imgDataText.h43}}</h4>
            <p>{{imgDataText.p3}}</p>
            <p>{{imgDataText.p4}}</p>
            <p>{{imgDataText.p5}}</p>
        </div>
    </div>
</template>

<style scoped>
@import url(../../assets/style/thisUserData.css);
</style>